<template>
  <div class="Film">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="https://liangcang-material.alicdn.com/prod/upload/9d7e02138223471ab941f29b9ada7277.jpg?x-oss-process=image/resize,w_1125/format,webp/interlace,1"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://ykimg.alicdn.com/develop/image/2022-01-20/3a4a1861ce99437ccd1aa4060e81a3d2.jpg?x-oss-process=image/resize,w_1125/format,webp/interlace,1"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://liangcang-material.alicdn.com/prod/upload/a4ba877d1db24c6991aea2943dce0c55.jpg?x-oss-process=image/resize,w_1125/format,webp/interlace,1"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://ykimg.alicdn.com/develop/image/2022-01-16/e23254adc1a846b622d494f143269db6.jpg?x-oss-process=image/resize,w_1125/format,webp/interlace,1"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://liangcang-material.alicdn.com/prod/upload/ca05622fc6e840e5a3952c4bb6df24ba.jpg?x-oss-process=image/resize,w_1125/format,webp/interlace,1"
            alt=""
          />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="blue">打开优酷APP，流畅到起飞</div>
    <div class="content">
      <h3>今日推荐</h3>
      <ul class="cont-item">
        <li class="con-list" v-for="(item, index) in arr" :key="index">
          <img :src="item.img" alt="" />
          <div class="data">{{ item.data }}</div>
          <div class="title">{{ item.title }}</div>
          <div class="text">{{ item.text }}</div>
        </li>
      </ul>
    </div>
    <footer>
      <p>Copyrightc2019优酷youku.com 版权所有</p>
      <p class="foot">反盗版盗链声明京ICP备06050721号-1</p>
    </footer>
  </div>
</template>
<script>
import Swiper from "../../node_modules/swiper/swiper-bundle";
export default {
  name: "Film",
  data() {
    return {
      arr: [
        {
          img: "https://m.ykimg.com/0584000061E7AEE11FD8520958111253",
          title: "丛林奇航",
          text: "巨石强森勇闯秘境",
        },
        {
          img: "https://liangcang-material.alicdn.com/prod/upload/07949221f75e4736a88e4483e45d018c.jpg",
          title: "铁道英雄",
          text: "张涵予热血抗战",
        },
        {
          img: "https://m.ykimg.com/0584000061DD430A2037DD08C811820F",
          title: "007：无暇赴死",
          text: "特工邦德搏命反击",
        },
        {
          img: "https://m.ykimg.com/0584000061D40A4813EB66098619A937",
          title: "沙丘",
          text: "少年英雄宇宙之战",
        },
        {
          img: "https://liangcang-material.alicdn.com/prod/upload/f288fe6b535143f38406ea7735b03349.jpg",
          title: "速度与激情9",
          text: "范迪塞尔狂野飙车",
        },
        {
          img: "https://m.ykimg.com/0584000061C567B913F7FF09582A36A3",
          title: "门锁",
          text: "白百何诠释独居女",
        },
      ],
    };
  },
  methods: {
    fn() {
      new Swiper(".swiper", {
        direction: "horizontal", // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,
        speed: 1000,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
  },
  mounted() {
    this.fn();
  },
};
</script>
<style scoped>
.Film {
  margin-top: 2.2rem;
}
.swiper {
  width: 100%;
  height: 3.75rem;
}
.swiper img {
  width: 100%;
  height: 3.75rem;
}
.blue {
  width: 95%;
  background: #43c5fb;
  color: #fff;
  font-size: 0.24rem;
  height: 0.68rem;
  border: 1px solid #d8ffff;
  margin: 0.38rem 0.18rem;
  text-align: center;
  border-radius: 0.1rem;
  line-height: 0.68rem;
}
.content {
  width: 100%;
}
.content h3 {
  margin: 0.12rem;
}
.content .cont-item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.content .cont-item li {
  width: 2.46rem;
  height: 5.2rem;
  position: relative;
}
.content .cont-item li .data {
  position: absolute;
  top: 1.7rem;
  right: 0.1rem;
  font-size: 0.13rem;
  color: #fff;
}
.content .cont-item li .title {
  margin-top: 0.2rem;
  font-size: 0.3rem;
  font-weight: 500;
}
.content .cont-item li .text {
  margin: 0.16rem 0 0.2rem 0;
  font-size: 0.25rem;
  color: #999999;
}
.content .cont-item li img {
  width: 2.46rem;
  height: 3.68rem;
}
.content .cont-item li div {
  padding: 0 0.11rem;
}
footer {
  width: 6rem;
  border-top: 1px solid #eeeeee;
  margin: 0 auto;
  margin-top: 1.2rem;
  padding-top: 0.1rem;
}
footer .foot {
  color: #909090;
}
footer p {
  margin-top: 0.1rem;
  text-align: center;
  font-size: 0.2rem;
}
</style>